<template>
	<div id="popup" class="ol-popup table-popup">
		<div class="popup-header">
			{{ popupType == "search" ? "站点详情" : "风险预警修改" }}
			<span id="popup-closer" class="ol-popup-closer"></span>
		</div>
		<div id="popup-content">
			<div v-if="popupType != 'search'">
				<div
					class="table"
					style="width: 363px; max-height: 189px; overflow-y: auto"
				>
					<el-table :data="dataTable" border style="width: 100%">
						<el-table-column
							prop="staionName"
							label="站名"
							align="center"
							width="200"
						>
							<template slot-scope="scope">
								<el-tooltip
									class="item"
									effect="dark"
									:content="scope.row.staionName"
									placement="top-start"
								>
									<el-input
										size="mini"
										v-model="scope.row.staionName"
									></el-input>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column
							prop="stationId"
							label="站号"
							align="center"
							width="100"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<el-input
									size="mini"
									v-model="scope.row.stationId"
								></el-input>
							</template>
						</el-table-column>
						<el-table-column
							prop="startTime"
							label="时效"
							align="center"
							width="50"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<el-input
									size="mini"
									v-model="scope.row.time"
								></el-input>
							</template>
						</el-table-column>
						<el-table-column
							prop="timeValue"
							label="风险值"
							align="center"
							width="80"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<el-input
									size="mini"
									v-model="scope.row.timeValue"
								></el-input>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="popup-bottom">
					<el-button type="primary" size="mini" @click="handleModify">
						确认修改
					</el-button>
				</div>
			</div>
			<ul v-if="popupType == 'search'">
				<li>
					<span class="popup-label">站点名称：</span>
					{{ station.stationName }}
				</li>
				<li>
					<span class="popup-label">站点编号：</span>
					{{ station.stationNumber }}
				</li>
				<li>
					<span class="popup-label">地市：</span>
					{{ station.stationAddress }}
				</li>
				<li>
					<span class="popup-label">区县：</span>
					{{ station.stationCounty }}
				</li>
				<li>
					<span class="popup-label">经度：</span>
					{{ station.longitude }}
				</li>
				<li>
					<span class="popup-label">纬度：</span>
					{{ station.latitude }}
				</li>
				<li>
					<span class="popup-label">创建时间：</span>
					{{ station.createTime }}
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import Datagrid from '@/components/Datagrid'

import {
	postAction
} from '@/api/action'

export default {
	name: 'Chart',
	components: { Datagrid },
	props: {
		cOption: Array,
		popupType: String
	},
	data() {
		return {
			url: '/api/riskWarning/updateWarningU',
			dataTable: [],
			station: {},
			loading: null,
		}
	},
	watch: {
		cOption: {
			handler(newOp, oldOp) {
				this.updateTbale();
			},
			deep: true,
		}
	},
	mounted() {
		this.initTable();
	},
	methods: {
		initTable() {
			this.updateTbale();
		},
		updateTbale() {
			setTimeout(() => {
				if (this.popupType === 'search') {
					this.station = this.cOption[0];
				} else {
					this.dataTable = this.cOption;
				}
			}, 200)
		},
		// 修改
		handleModify() {
			this.loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			const modifiedData = this.dataTable.map((item) => {
				return {
					'id': item.id,
					'timeValue': item.timeValue
					// 'reiskId': item.reiskId
				}
			})
			postAction(this.url, modifiedData).then(res => {
				console.log('修改', res);
				if (res.msg === '成功') {
					this.$message({
						message: `修改成功`,
						type: 'success'
					})
					this.$emit('refresh-map');
				}
			}).finally(() => {
				this.loading.close();
			})
		}
	}
}
</script>

<style lang="scss">
.ol-popup {
	.el-table__row {
		td {
			padding: 5px 0;

			.cell {
				width: 100% !important;
				padding: 0 5px;

				.el-input__inner {
					padding: 0 5px;
					text-align: center;
				}
			}
		}
	}

	.el-table__body-wrapper {
		max-height: 30vh;
		overflow-y: auto;
	}
}
</style>

<style lang="scss">
.popover {
	width: 260px;
}

.ol-popup.table-popup {
	position: absolute;
	background-color: white;
	-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
	padding-top: 32px;
	border-radius: 4px;
	// border: 1px solid #cccccc;
	bottom: 12px;
	left: -50px;
	min-width: 395px;
	/* min-height: 230px; */
	font-size: 13px;
	z-index: 200;
	display: grid;
}

/* .ol-popup:after,
  .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  .ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
  }

  .ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
  } */

.ol-popup-closer {
	text-decoration: none;
	position: absolute;
	top: 5px;
	right: 8px;
}

.ol-popup-closer:after {
	content: "✖";
}

.ol-popup p {
	border-bottom: 1px dashed #dedede;
}

.popup-header {
	position: absolute;
	width: 100%;
	height: 32px;
	background: #3e8aea;
	color: #fff;
	line-height: 32px;
	text-align: center;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
	.ol-popup-closer {
		top: 0;
	}
}

.popup-bottom {
	margin-top: 10px;
	width: 100%;
	text-align: center;
}

#popup-content {
	padding: 15px;
	width: 100%;
	/* height: 100%; */
}

#popup-content li {
	line-height: 24px;
}

#popup-content li .popup-label {
	font-weight: 600;
}
</style>
